<template>
  <div class="login">
    <div class="title-name border-bottom">实名认证</div>
    <div class="input-box border-bottom">
      <i class="icon-left icon-user"></i>
      <input type="text" placeholder="请输入您的真实姓名" v-model="name" ref="name"
             @keyup="holdInput('name',name)" @blur="out()" @focus="insinte(1,name)" maxlength="4">
      <i class="icon-right icon-close" v-show="showCloseName" @click="name=''"></i>
    </div>
    <div class="input-box border-bottom">
      <i class="icon-left icon-idcard"></i>
      <input type="text" placeholder="请输入您的身份证号" v-model="idCard" ref="idCard"
             @keyup="holdInput('idCard',idCard)" @blur="out()" @focus="insinte(2,idCard)" maxlength="18">
      <i class="icon-right icon-close" v-show="showCloseIdCard" @click="idCard=''"></i>
    </div>
    <div class="upload-box">
      <div class="upload-title border-bottom">
        身份证照片 <p>(请拍摄身份证原件，注意反光，保证内容清晰可见)</p>
      </div>
      <div class="upload-card upload-front">
        <h3>身份证正面</h3>
        <p class="front" @click="upload($refs.front)">
          <span class="progress border-card" v-show="frontLoading">
            <loading></loading>
          </span>
          <img src="/" v-show="frontImg" ref="frontImg">
        </p>
        <input type="file" hidden class="upload-file" ref="front"
               @change="imgUpload($refs.front,1)"
               accept="image/*" capture="camera" multiple>
      </div>
      <div class="upload-card upload-reverse">
        <h3>身份证背面</h3>
        <p class="reverse" @click="upload($refs.reverse)">
           <span class="progress border-card" v-show="reverseLoading">
            <loading></loading>
          </span>
          <img src="/" alt="" v-show="reverseImg" ref="reverseImg">
        </p>
        <input type="file" hidden class="upload-file" ref="reverse"
               @change="imgUpload($refs.reverse,2)"
               accept="image/*" capture="camera" multiple>
      </div>
      <div class="submit" @click="submit">
        提交认证
      </div>
    </div>


    <yd-popup class="authOk" v-model="authOk" position="center" width="80%" :closeOnMasker="false">
      <div class="text">
        <h3>恭喜！认证成功</h3>
        <p>您提交的认证资料已通过审核</p>
      </div>
      <div class="btn" @click="_jump">确定</div>
    </yd-popup>
    <yd-popup class="authNo" v-model="authNo" position="center" width="80%" :closeOnMasker="false">
      <div class="text">
        <h3><i class="icon-warning"></i>认证失败</h3>
        <p>您提交的认证资料未通过审核</p>
      </div>
      <div class="btn" @click="authNo = false">重新上传</div>
    </yd-popup>
    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>

</template>

<script>
  import Loading from 'components/loading/Loading'
  import {mapGetters} from 'vuex'
  import {startUpload} from 'common/js/imgUpload'
  import {autIDcard, isIdentity} from 'common/js/user'

  export default {
    data() {
      return {
        name: '', //用户名
        idCard: '', //身份证
        frontLoading: false, //上传正面loding
        frontImg: false,//上传背面图片
        reverseLoading: false, // 上传背面loading
        reverseImg: false,//上传背面图片
        frontUrl: '', //正面url
        reverseUrl: '',// 背面url
        authOk: false, //认证成功
        authNo: false, //认证失败
        showCloseName: false,
        showCloseIdCard: false,
      }
    },
    computed: {
      ...mapGetters([
        'loading'
      ]),
    },
    mounted() {
      document.title = '实名认证'
      //判断是否实名认证
      isIdentity({
        "phpsid": localStorage.getItem('token'),
      }).then(res => {
        this.$store.dispatch('hideLoading');
        if (res.status === 1) {
          if (res.expand.has_goods === 0) {
            this.$router.push('/specialtyRelease')
          } else {
            this.$router.push('specialtyList/' + localStorage.getItem('token'))
          }
        } else if (res.status === -1) {
          this.$router.push('/auth')
        } else if (res.status === 0) {
          this.$dialog.alert({mes: res.msg});
        } else {
          this.$dialog.alert({mes: '程序出错'});
        }
      })
    },
    methods: {
      //获取焦点
      insinte(item, val) {
        if (val !== '') {
          switch (item) {
            case 1:
              this.showCloseName = true;
              break;
            case 2:
              this.showCloseIdCard = true;
              break;
          }
        }
      },
      //失去焦点
      out() {
        this.showCloseName = false;
        this.showCloseIdCard = false;
      },
      //保存用户输入
      holdInput(key, val) {
        switch (key) {
          case 'name':
            if (val !== '') {
              this.showCloseName = true;
            } else {
              this.showCloseName = false;
            }
            break;
          case 'idCard':
            if (val !== '') {
              this.showCloseIdCard = true;
            } else {
              this.showCloseIdCard = false;
            }
        }
      },
      //提交
      submit() {
        if (!(/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/.test(this.name))) {
          this.$dialog.toast({mes: '请输入中文姓名', timeout: 1000,});
          this.$refs.name.focus();
        } else if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard))) {
          this.$dialog.toast({mes: '请输入正确的身份证号码', timeout: 1000,});
          this.$refs.idCard.focus();
        } else {
          this.$store.dispatch('showLoading');
          autIDcard({
            "phpsid": localStorage.getItem('token'),//session_id
            "is_check": 1,//1-用户勾选同意
            "identity_card": this.idCard,//身份证号
            "real_name": this.name,//真实名字
            "card_face": this.frontUrl,//身份证头像面的图片链接
            "card_back": this.reverseUrl,//身份证国徽面的图片链接
          }).then(res => {
            this.$store.dispatch('hideLoading');
            if (res.status === 1) {
              this.authOk = true;
            } else if (res.status < 0) {
              var type = res.expand.type;
              switch (Number(type)) {
                case  1:
                  this.$dialog.alert({
                    mes: res.expand.info, callback: () => {
                      this.$router.push('/login');
                    }
                  });
                  break;
                case 7:
                  this.authNo = true;
                  break;
                default:
                  this.$dialog.toast({mes: res.expand.info, timeout: 1000,});
                  break;
              }
            } else {
              this.$dialog.alert({mes: res.expand.info});
            }
          })
        }
      },
      //跳转到发布页面
      _jump() {
        this.$router.push('/specialtyRelease');
      },
      //选中图片上传
      imgUpload(item, type) {
        switch (type) {
          case 1:
            this.frontLoading = true;
            break;
          case 2:
            this.reverseLoading = true;
        }
        //上传图片
        startUpload(item.files[0]).then(res => {
          if (res.status === 1) {
            switch (type) {
              case 1:
                this.frontImg = true;
                this.frontLoading = false;
                this.frontUrl = res.path;
                this.$refs.frontImg.src = res.path;
                break;
              case 2:
                this.reverseImg = true;
                this.reverseLoading = false;
                this.reverseUrl = res.path;
                this.$refs.reverseImg.src = res.path;
            }
          } else { //失败加载消失
            switch (type) {
              case 1:
                this.frontLoading = false;
                break;
              case 2:
                this.reverseLoading = false;
            }
          }
        })
      },
      //点击上传
      upload(item) {
        //判断是否是苹果，如果是删除capture属性
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
          item.removeAttribute('capture')
        }
        //点击input上传
        item.click();
      }
    },
    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title-name
    background: $background-f;
    min-height: 1.3rem;
    padding: .5rem;
    font-size: .45rem;
    color: $color-title;
    line-height: .6rem;
    text-align: center;

  .input-box
    position: relative;
    background: $background-f;
    height: 1.32rem;
    font-size: .4rem;
    padding: 0 1.3rem;
    color: $color-text;
    input
      width: 100%;
      font-size: .45rem;
      line-height: 1.32rem;
      color: $color-text;
    input:
    :-webkit-input-placeholder
      color: $color-code;
    i
      position: absolute;
      top: 0;
      width: 1.3rem;
      text-align: center;
      height: 1.32rem;
      line-height: 1.32rem;
      font-size: .45rem;
      color: $color-icon
    .icon-right
      right: 0;
    .icon-left
      left: 0;
    .icon-close
      color: $color-code;

  .upload-box
    background: $background-f;
    margin-top: .28rem;
    padding: 0 .5rem .5rem .5rem;
    overflow: hidden;
    .upload-title
      font-size: .44rem;
      color: $color-text;
      margin-bottom: .6rem;
      padding: .42rem 0 .3rem 0;
      p
        margin-top: .2rem;
        color: $color-code;
        font-size: .34rem;
    .upload-card
      text-align: center;
      position: relative;
      margin-bottom: .6rem;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      img
        width: 100%;
        height: 100%;
        border-radius: .18rem;
      h3
        width: 100%;
        font-size: .4rem;
        margin-bottom: .46rem;
        color: $color-text;
      .front
        position: relative;
        width: 6rem;
        height: 3.8rem;
        background-image: url("~common/image/id-card-front.png");
        background-size: 100% 100%;
      .reverse
        width: 6rem;
        height: 3.8rem;
        background-image: url("~common/image/id-card-reverse.png");
        background-size: 100% 100%;
    .progress
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content center;
      text-align: center;
      background: $background-f;
      border-radius: .18rem;

  .submit
    line-height: 1.4rem;
    background: $background-btn;
    text-align: center;
    font-size: .5rem;
    margin-top: .5rem;
    color: $color;

  .authOk
    text-align: center;
    h3
      font-size: .5rem;
      margin-top: .3rem;
      line-height: 1.5rem;
      color: $color-a;
    p
      color: $color-des;
    .btn
      margin: .5rem 1rem;
      line-height: 1.2rem;
      border-radius: .1rem;
      color: $color;
      font-size: .4rem;
      background: $background-btn;

  .authNo
    text-align: center;
    h3
      font-size: .5rem;
      margin-top: .3rem;
      line-height: 1.5rem;
      color: $color-text;
    p
      color: $color-des;
    i
      font-size: .6rem;
    .btn
      margin: .5rem 1rem;
      line-height: 1.2rem;
      border-radius: .1rem;
      color: $color;
      font-size: .4rem;
      background: $background-btn;
</style>
